<template>
  <el-card class="card-box">
    <template #header>
      <div class="card-header">
        <span>客流趋势图</span>
      </div>
    </template>
    <div class='chart-wrap'>
      <div ref="chartRef" class="chart-content" v-show="isShowChart"></div>
      <el-empty description="暂无数据" v-show="!isShowChart"/>
    </div>
  </el-card>
</template>

<script setup>
  import * as echarts from 'echarts';
  import {getChartPassengerFlowOption } from '../../echartOption'
  const props = defineProps({
    statisticData:{
      type:Array,
      default:()=>[]
    }
  })
  let isShowChart = ref(false);
  let chatData = reactive([])
  let echartsInstance = shallowRef(null);
  let chartRef = shallowRef();
  const initChart = ()=>{
    const chatDataX = chatData?.map(ele => ele?.visitTime || ele?.visitDate || ele?.visitMonth) || [];
    const chatDataY = chatData?.map(item => item.customerNum) || [];
    echartsInstance.value = null;
    echartsInstance.value = echarts.init(chartRef.value, null, {renderer:'svg'})
    const option = getChartPassengerFlowOption(chatDataX,chatDataY)
    echartsInstance.value.setOption(option,true)
    window.addEventListener('resize', resize)
  }

  const resize = () =>{
    if(echartsInstance.value){
      echartsInstance.value?.resize()
    }
  }
  onUnmounted(() => {
    // 组件卸载时销毁图表实例
    if(echartsInstance.value){
      echartsInstance.value.dispose();
    }
  });

  watch(() => props.statisticData,(newValue)=>{
    if(newValue?.length){
      chatData = newValue;
      isShowChart.value = true;
      nextTick(() => {
        initChart()
        resize()
      })
    }
    else{
      chatData = [];
      isShowChart.value = false;
    }
  },
  {
    deep: true,
    immediate: true
  })
</script>
<style lang="scss" scoped>
  .card-box{
    width: 100%;
    .chart-wrap{
      width: 100%;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      .chart-content{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
